<template>
	<view class="tabbar-content" style="display: flex; justify-content: space-between;">
		<view style="display: flex; justify-content: space-around;">
			<image :src="songData.image" mode=""></image>
			<view style="display: flex; flex-direction: column; margin-left: 40rpx;">
				<p class="title">{{songData.title}}</p>
				<p >{{songData.author}}</p>
			</view>
		</view>
		<view class="stateControll">
			<i :class="[songData.playState?'icon-zanting':'icon-icon-2', 'iconfont']" @click.stop="stateChange"></i>
		</view>
	</view>
</template>

<script>
	import app from '../../../App.vue'
	export default {
		data() {
			return {
				iac:app.globalData.iac
			};
		},
		props:['iac'],
		computed: {
			songData(){
				return this.$store.state.song
			}
		},
		methods: {
			stateChange(){
				
				this.songData.playState = !this.songData.playState
				this.$store.commit('songChange', this.songData)
				if(this.songData.playState)return this.iac.play()
				this.iac.pause()
			}
			// pulse(){
			// 	// console.log(1)
			// 	this.nowSong.playState = !this.nowSong.playState
			// 	this.$store.commit('songChange', this.nowSong)
				
			// 	// console.log(this.$store.state)
			// }
		}
		
	}
</script>

<style lang="less" scoped>
	.tabbar-content {
		padding: 10rpx 0;
		width: 100%;
		height: 60rpx;
		background-color: #fff;
		font-size: 24rpx;
		border-top: .5rpx solid #ddd;
		image {
			// background-color: yellow;
			margin-left: 10rpx;
			padding: 5rpx;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}
	}
	.stateControll {
		.iconfont {
			font-size: 34rpx;
			margin-right: 30rpx;
			line-height: 50rpx;
		}
	}
</style>
